<div class="authorize-component">

    <div id="alertTemplate" class="alert alert-dismissable" style="display: none">
        <button type="button" class="close" data-dismiss="alert"
                aria-hidden="true">
            &times;
        </button>
        <span></span>
    </div>

    <div class="search-div">
        <div class="search-wrap">
            <div class="input-group">
                <input type="text" class="search-text text-input form-control" placeholder="Search Roles ...">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button" onclick="searchBaseInfo()">Go!</button>
                </span>
            </div>
        </div>
        <div class="search-suggestion-div">
        </div>
    </div>

    <div class="base-info" style="display: none">
        <div class="base-info-panel panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title"></h3>
            </div>
            <div class="role panel-body">
                <div class="id-div"><div class="id-label">id:</div><div class="id-value"></div></div>
                <div class="name-div"><div class="name-label">role name:</div><div class="name-value"></div></div>
                <div class="description-div"><div class="description-label">description:</div><div class="description-value"></div></div>
            </div>
        </div>
    </div>

    <div class="authorize-panel panel-body">
        <ul class="nav nav-tabs">
            <li class="service-authority-li active"><a href=".service-authority-panel" data-toggle="tab">Service Authority</a></li>
            <li class="front-authority-li"><a href=".front-authority-panel" data-toggle="tab">Front Authority</a></li>
        </ul>
        <div class="authority-tab-content tab-content">
            <div class="service-authority-panel tab-pane fade in active">
                <div class="microservice-list btn-group" data-toggle="buttons">
                </div>
                <div class="authority-list">
                </div>
            </div>
            <div class="front-authority-panel tab-pane fade">
                <div class="front-app-list btn-group" data-toggle="buttons">
                </div>
                <div class="front-element-forest">
                </div>
            </div>
        </div>
    </div>

    <div class="templates">
        <div class="authority-template authority-panel panel">
            <div class="panel-heading">
                <h3 class="panel-title"></h3>
                <div class="button-wrap">
                    <div class="grant-permission-button authorize-btn" title="Grant Permission"></div>
                    <div class="revoke-permission-button cancel-authority-btn" title="Cancel Permission"></div>
                </div>
            </div>
            <div class="panel-body">
                <div class="authority-uri"></div>
                <div class="authority-method"></div>
            </div>
        </div>

        <div class="menu-panel">
            <div class="self">
                <div class="menu-icon"></div>
                <div class="menu-code"></div>
                <div class="menu-name"></div>
                <div class="operation-button-wrap">
                    <div class="grant-authority-button" title="Grant Permission"></div>
                    <div class="cancel-authority-button" title="Cancel Permission"></div>
                </div>
            </div>
            <div class="children">
                <ul>
                </ul>
            </div>
        </div>

        <div class="button-panel">
            <div class="self">
                <div class="button-icon"></div>
                <div class="button-code"></div>
                <div class="button-name"></div>
                <div class="operation-button-wrap">
                    <div class="grant-authority-button" title="Grant Permission"></div>
                    <div class="cancel-authority-button" title="Cancel Permission"></div>
                </div>
            </div>
        </div>

    </div>

</div>

<link type="text/css" rel="stylesheet" href="/static/clientlibs/tattoo/authorize/component/authorize-component/css/authorize-component.css"/>
<script type="text/javascript" src="/static/clientlibs/tattoo/authorize/component/authorize-component/js/authorize-component.js"></script>
